<template>
  <div style="font-size: 16px;font-weight: 600;">
    <el-radio></el-radio>人员黑名单
  </div>
  <el-form :inline="true" :model="state.dataForm" @keyup.enter="state.getDataList()" style="margin-top: 10px;">
    <!--新增 -->
    <el-form-item label="姓名:">
      <el-input v-model="state.dataForm.name" type="text" clearable placeholder="请输入" style="width: 220px;"></el-input>
    </el-form-item>
    <el-form-item label="手机号:">
      <el-input v-model="state.dataForm.mobile" type="text" clearable placeholder="请输入"
        style="width: 220px;"></el-input>
    </el-form-item>
    <!-- 查询 -->
    <el-form-item>
      <el-button  @click="state.getDataList()">{{ $t("query")
        }}</el-button>
    </el-form-item>
    <!--新增-->
    <el-form-item>
      <el-button v-if="state.hasPermission('crm:crmperson:save')" type="primary" @click="addOrUpdateHandle()">{{
    $t("add") }}</el-button>
      <!-- 移除黑名单 -->
    </el-form-item>
    <el-form-item>
      <el-button v-if="state.hasPermission('crm:crmperson:removeBlacklist')" type="danger"
        @click="removeBlacklist()">移除黑名单</el-button>
    </el-form-item>
    <el-table :header-cell-style="{ 'background': '#eef1f6', 'color': '#1f2d3d', 'border-color': '#dfe6ec' }"
      v-loading="state.dataListLoading" :data="state.dataList" border
      @selection-change="state.dataListSelectionChangeHandle" style="width: 100%">
      <el-table-column type="selection" align="center"></el-table-column>
      <el-table-column align="center" prop="name" label="姓名" min-width="40">
        <template v-slot="scope">
          <el-link :underline="false" type="primary" @click="userHandle(scope.row.id)">{{ scope.row.name }}</el-link>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="position" label="职务" min-width="40"></el-table-column>
      <el-table-column align="center" prop="company" label="公司"></el-table-column>
      <el-table-column align="center" prop="tel" label="电话" min-width="60"></el-table-column>
      <el-table-column align="center" prop="mobile" label="手机" min-width="60"></el-table-column>
      <el-table-column align="center" prop="email" label="邮箱"></el-table-column>
      <el-table-column align="center" prop="city" label="城市" min-width="30"></el-table-column>
      <el-table-column align="center" prop="remark" label="人员备注"></el-table-column>
      <el-table-column align="center" prop="updateTime" label="修换时间"></el-table-column>
      <el-table-column align="center" prop="realName" label="修改人" min-width="30"></el-table-column>
    </el-table>
  </el-form>
  <el-pagination :current-page="state.page" :page-sizes="[10, 20, 50, 100]" :page-size="state.limit"
    :total="state.total" layout="total, sizes, prev, pager, next, jumper" @size-change="state.pageSizeChangeHandle"
    @current-change="state.pageCurrentChangeHandle"> </el-pagination>
  <!-- 弹窗, 新增 / 修改 -->
  <add-or-update :key="addKey" ref="addOrUpdateRef" @refreshDataList="state.getDataList"></add-or-update>
</template>
<script lang="ts" setup>
import baseService from "@/service/baseService";
import { ElMessage } from "element-plus"
import { useRouter } from 'vue-router'
import useView from "@/hooks/useView";
import { nextTick, reactive, ref, toRefs, watch } from "vue";
import AddOrUpdate from "./blacklist-list-add-update.vue";
const view = reactive({
  getDataListURL: '/crm/crmperson/queryPage',
  getDataListIsPage: true,
  deleteURL: "/crm/crmperson",
  deleteIsBatch: true,
  dataForm: {
    id: "",
    name: "",
    mobile: "",
    state: 2,
  },
  dataForm2: {
  },
});

/**
 * 跳转人员查询详情页面
 */
const router = useRouter();
const userHandle = (row: any) => {
  router.push({
    path: "/expocube/personnel-information-details",
    query: {
      id: row,
    }
  });
};

//移除黑名单
const removeBlacklist = () => {
  let ids: string[] = [];
  for (let i = 0; i < state.dataListSelections!.length; i++) {
    ids.push(state.dataListSelections![i].id);
  }
  state.dataForm2 = ids;
  return baseService.put("/crm/crmperson/removeBlacklist", state.dataForm2).then((res) => {
    if (res.code == 0) {
      // 重新获取数据列表
      state.getDataList();
      return ElMessage.success("移除黑名单成功");
    }
  });
}

const state = reactive({ ...useView(view), ...toRefs(view) });
const addKey = ref(0);
const addOrUpdateRef = ref();
const addOrUpdateHandle = (id?: number) => {
  addKey.value++;
  nextTick(() => {
    addOrUpdateRef.value.init(id);
  });
};
</script>
<style lang="scss" scoped>
::v-deep .el-table .cell {
  white-space: nowrap;
}
</style>
